{"componentChunkName":"component---src-templates-blog-post-js","path":"/Building-a-Task-Management-App-in-React/","result":{"data":{"site":{"siteMetadata":{"title":"Aleks Popovic - personal website and blog"}},"markdownRemark":{"id":"1f063c58-f88d-575a-a1db-119bea7f5d8a","excerpt":"Can you become more productive by making a productivity app? Not sure about that, but you can definitely become more productive by building new projects and a…","html":"

Can you become more productive by making a productivity app? Not sure about that, but you can definitely become more productive by building new projects and a task management app has been on my mind for a long time now. I decided to build it in React without using any additional plugins except node-sass which allows you to use .scss files in your project.

\n

If you prefer a video version of this tutorial you can watch me build a task management app on Youtube:

\n
\n

I started a new React app by running create-react-app command in my working folder.

\n
create-react-app task-management
\n

For this project I will focus more on the React part of the code, but there will be a SandBox link to a full code example that includes the CSS files as well. I mainly used flexbox to center elements, and that’s pretty much 80% of the CSS used. The rest is adding custom colors and margins for separation between elements.

\n

To start off - I removed all unnecessary code from App.js and I imported the StatusLine component, which we will use to sort out our tasks based on their status. I added it three times alongside an h1 heading, and I also added function skeletons that we will be implementing later.

\n
import { useState, useEffect } from \"react\"\nimport \"../styles/App.scss\"\nimport StatusLine from \"./StatusLine\"\n\nfunction App() {\n  const [tasks, setTasks] = useState([])\n\n  function addEmptyTask(status) {\n    // do stuff\n  }\n\n  function addTask(taskToAdd) {\n    // do stuff\n  }\n\n  function deleteTask(taskId) {\n    // do stuff\n  }\n\n  function moveTask(id, newStatus) {\n    // do stuff\n  }\n\n  function saveTasksToLocalStorage(tasks) {\n    // do stuff\n  }\n\n  function loadTasksFromLocalStorage() {\n    // do stuff\n  }\n\n  return (\n    <div className=\"App\">\n      <h1>Task Management</h1>\n      <main>\n        <section>\n          <StatusLine\n            tasks={tasks}\n            addEmptyTask={addEmptyTask}\n            addTask={addTask}\n            deleteTask={deleteTask}\n            moveTask={moveTask}\n            status=\"Backlog\"\n          />\n          <StatusLine\n            tasks={tasks}\n            addEmptyTask={addEmptyTask}\n            addTask={addTask}\n            deleteTask={deleteTask}\n            moveTask={moveTask}\n            status=\"In Progress\"\n          />\n          <StatusLine\n            tasks={tasks}\n            addEmptyTask={addEmptyTask}\n            addTask={addTask}\n            deleteTask={deleteTask}\n            moveTask={moveTask}\n            status=\"Done\"\n          />\n        </section>\n      </main>\n    </div>\n  )\n}\n\nexport default App
\n

We are passing in all of our task manipulation functions into the StatusLine components because we need to pass them into each individual Task component. We are also adding a status property which will be used to determine task’s initial status and to also set up some headings.

\n

Our tasks are going to be stored in an array of objects by using the useState hook. We also imported the useEffect hook because we will use it later to save and load our task data from the browser’s localStorage.

\n

Let’s start implementing those functions.

\n
function addEmptyTask(status) {\n  const lastTask = tasks[tasks.length - 1]\n\n  let newTaskId = 1\n\n  if (lastTask !== undefined) {\n    newTaskId = lastTask.id + 1\n  }\n\n  setTasks(tasks => [\n    ...tasks,\n    {\n      id: newTaskId,\n      title: \"\",\n      description: \"\",\n      urgency: \"\",\n      status: status,\n    },\n  ])\n}
\n

We are going to use addEmptyTask() when we start adding a new task, so we just want to set it to the first available ID and leave all other properties empty, except for the status which we will pass into the function from the Task component. If we have no tasks we set the ID to 1 by default. After that we are free to set our state by merging the new empty task object with the existing array of tasks from our state.

\n
function addTask(taskToAdd) {\n  let filteredTasks = tasks.filter(task => {\n    return task.id !== taskToAdd.id\n  })\n\n  let newTaskList = [...filteredTasks, taskToAdd]\n\n  setTasks(newTaskList)\n\n  saveTasksToLocalStorage(newTaskList)\n}
\n

When we enter all of our task properties we want to save it to our state. But, before that, we want to remove the empty task with the same ID, so we filter our tasks array. After that we merge the new task with the rest of the list and we save everything to local storage (we implement this function later).

\n
function deleteTask(taskId) {\n  let filteredTasks = tasks.filter(task => {\n    return task.id !== taskId\n  })\n\n  setTasks(filteredTasks)\n\n  saveTasksToLocalStorage(filteredTasks)\n}
\n

Deleting a task is as simple as filtering our tasks array just the way we did it for adding a new task. After that we once again set our state again and save everything in the local storage.

\n
function moveTask(id, newStatus) {\n  let task = tasks.filter(task => {\n    return task.id === id\n  })[0]\n\n  let filteredTasks = tasks.filter(task => {\n    return task.id !== id\n  })\n\n  task.status = newStatus\n\n  let newTaskList = [...filteredTasks, task]\n\n  setTasks(newTaskList)\n\n  saveTasksToLocalStorage(newTaskList)\n}
\n

Our moveTask function is going to be used to move a task from one status to the next, or previous one. We filter our tasks list to search for the task that needs to be moved and to remove it from the state so we can change its status. After changing the tasks status we once again merge it back into the state and save everything to local storage.

\n
function saveTasksToLocalStorage(tasks) {\n  localStorage.setItem(\"tasks\", JSON.stringify(tasks))\n}
\n

Local storage supports only storing string values, but our tasks are stored as an array of objects. To get around this restriction we need to use JSON.stringify to transform our data into a string. After that we call the setItem function which will store our tasks.

\n
function loadTasksFromLocalStorage() {\n  let loadedTasks = localStorage.getItem(\"tasks\")\n\n  let tasks = JSON.parse(loadedTasks)\n\n  if (tasks) {\n    setTasks(tasks)\n  }\n}
\n

To retrieve our data from the local storage we need to revert our data from a string to an array of objects. For that we use JSON.parse function and then we are free to set our state. In order to call this function only once we need to implement the useEffect hook.

\n
useEffect(() => {\n  loadTasksFromLocalStorage()\n}, [])
\n

We call our function and as a second parameter inside useEffect we pass in an empty array. The second parameter is used to prevent useEffect from triggering on every render. By giving it an array of properties to watch we will activate useEffect only when those properties change. But, if we pass in an empty array the useEffect will trigger only once, on the first page load, and that is exactly what we want.

\n

With all functions implemented we are ready to move on to the StatusLine component.

\n
import \"../styles/statusLine.scss\"\nimport Task from \"./Task\"\n\nexport default function StatusLine(props) {\n  const { status, tasks, addTask, deleteTask, addEmptyTask, moveTask } = props\n\n  let taskList, tasksForStatus\n\n  function handleAddEmpty() {\n    addEmptyTask(status)\n  }\n\n  if (tasks) {\n    tasksForStatus = tasks.filter(task => {\n      return task.status === status\n    })\n  }\n\n  if (tasksForStatus) {\n    taskList = tasksForStatus.map(task => {\n      return (\n        <Task\n          addTask={task => addTask(task)}\n          deleteTask={id => deleteTask(id)}\n          moveTask={(id, status) => moveTask(id, status)}\n          key={task.id}\n          task={task}\n        />\n      )\n    })\n  }\n\n  return (\n    <div className=\"statusLine\">\n      <h3>{status}</h3>\n      {taskList}\n      <button onClick={handleAddEmpty} className=\"button addTask\">\n        +\n      </button>\n    </div>\n  )\n}
\n

It may look like there is a lot happening here, but there really isn’t. We are picking up all of the props that we passed in from the App component. We use the status prop to filter the task array and display only tasks with that status. If we have tasks in our state we map them into Task components into which we pass in our functions for adding, deleting and moving a task, and also the task data itself. We handle adding an empty task with a simple button with an onClick event.

\n

Now we need to set up our Task component and we are done!

\n
import \"../styles/task.scss\"\nimport { useState } from \"react\"\n\nexport default function Task(props) {\n  const { addTask, deleteTask, moveTask, task } = props\n\n  const [urgencyLevel, setUrgencyLevel] = useState(task.urgency)\n  const [collapsed, setCollapsed] = useState(task.isCollapsed)\n  const [formAction, setFormAction] = useState(\"\")\n\n  function setUrgency(event) {\n    setUrgencyLevel(event.target.attributes.urgency.value)\n  }\n\n  function handleSubmit(event) {\n    // do stuff\n  }\n\n  function handleMoveLeft() {\n    // do stuff\n  }\n\n  function handleMoveRight() {\n    // do stuff\n  }\n\n  return (\n    <div className={`task ${collapsed ? \"collapsedTask\" : \"\"}`}>\n      <button onClick={handleMoveLeft} className=\"button moveTask\">\n        &#171;\n      </button>\n      <form onSubmit={handleSubmit} className={collapsed ? \"collapsed\" : \"\"}>\n        <input\n          type=\"text\"\n          className=\"title input\"\n          name=\"title\"\n          placeholder=\"Enter Title\"\n          disabled={collapsed}\n          defaultValue={task.title}\n        />\n        <textarea\n          rows=\"2\"\n          className=\"description input\"\n          name=\"description\"\n          placeholder=\"Enter Description\"\n          defaultValue={task.description}\n        />\n        <div className=\"urgencyLabels\">\n          <label className={`low ${urgencyLevel === \"low\" ? \"selected\" : \"\"}`}>\n            <input\n              urgency=\"low\"\n              onChange={setUrgency}\n              type=\"radio\"\n              name=\"urgency\"\n            />\n            low\n          </label>\n          <label\n            className={`medium ${urgencyLevel === \"medium\" ? \"selected\" : \"\"}`}\n          >\n            <input\n              urgency=\"medium\"\n              onChange={setUrgency}\n              type=\"radio\"\n              name=\"urgency\"\n            />\n            medium\n          </label>\n          <label\n            className={`high ${urgencyLevel === \"high\" ? \"selected\" : \"\"}`}\n          >\n            <input\n              urgency=\"high\"\n              onChange={setUrgency}\n              type=\"radio\"\n              name=\"urgency\"\n            />\n            high\n          </label>\n        </div>\n        <button\n          onClick={() => {\n            setFormAction(\"save\")\n          }}\n          className=\"button\"\n        >\n          {collapsed ? \"Edit\" : \"Save\"}\n        </button>\n        {collapsed && (\n          <button\n            onClick={() => {\n              setFormAction(\"delete\")\n            }}\n            className=\"button delete\"\n          >\n            X\n          </button>\n        )}\n      </form>\n      <button onClick={handleMoveRight} className=\"button moveTask\">\n        &#187;\n      </button>\n    </div>\n  )\n}
\n

We have a couple of interesting things happening here. We have two buttons which we will use to call the moveTask function and switch the task’s status.

\n

We also have a form with input fields for task’s title and description. There is also the urgencyLabels container which is a group of radio buttons for switching the task’s status. Getting the checked radio button’s value is a bit tricky in react, so we will handle the urgency through state, but everything else we can submit as a form field.

\n

I have set up some helper classes - “collapsed”, “collapsedTask” and “selected”. I wanted to collapse tasks when they get saved and loaded from storage, so the screen doesn’t get too cluttered. This is handled with the isCollapsed property that each new task will have, and everything else is done through CSS. If a task has isCollapsed = true, my CSS takes care of collapsing everything except for the title, urgency and control buttons. We also reveal a delete button which you can use to get rid of a task completely.

\n

We are also reusing the Save button to edit an already created task. Since we have two buttons in a form we need to handle our form’s onSubmit event.

\n
function handleSubmit(event) {\n  event.preventDefault()\n\n  if (formAction === \"save\") {\n    if (collapsed) {\n      setCollapsed(false)\n    } else {\n      let newTask = {\n        id: task.id,\n        title: event.target.elements.title.value,\n        description: event.target.elements.description.value,\n        urgency: urgencyLevel,\n        status: task.status,\n        isCollapsed: true,\n      }\n\n      addTask(newTask)\n      setCollapsed(true)\n    }\n  }\n\n  if (formAction === \"delete\") {\n    deleteTask(task.id)\n  }\n}
\n

If our form action is set to save that means we are trying to either save a task or edit it. If we are trying to edit it we don’t want to actually submit a form - we just want to “uncollapse” it. If we are saving a task then we create a new object with the properties from the form and from the state. If we are trying to delete the task we just call our deleteTask function while passing in the task’s ID.

\n

To be able to move a task between status lanes I made two functions which are very similar in what they do, but this makes the code more readable.

\n
function handleMoveLeft() {\n  let newStatus = \"\"\n\n  if (task.status === \"In Progress\") {\n    newStatus = \"Backlog\"\n  } else if (task.status === \"Done\") {\n    newStatus = \"In Progress\"\n  }\n\n  if (newStatus !== \"\") {\n    moveTask(task.id, newStatus)\n  }\n}\n\nfunction handleMoveRight() {\n  let newStatus = \"\"\n\n  if (task.status === \"Backlog\") {\n    newStatus = \"In Progress\"\n  } else if (task.status === \"In Progress\") {\n    newStatus = \"Done\"\n  }\n\n  if (newStatus !== \"\") {\n    moveTask(task.id, newStatus)\n  }\n}
\n

Both functions look at the task’s current status and set the new status based on what we are trying to do. Backlog is our left-most status so clicking the moveLeft button while the task is in the Backlog won’t do anything. Similar is true for the Done status and clicking the moveRight button.

\n

And that is all of the code I’ve used for this project, except for the CSS. If you are interested into seeing the full working version you can check out the project on CodeSandbox.

\n
\n
If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.\n

I also have a YouTube channel where I regularly upload React and web dev tutorials, so if that’s your cup of tea feel free to support me by subscribing.

","frontmatter":{"title":"Building a Task Management App in React","series":null,"seriesLink":null,"date":"December 12, 2020","description":"Can you become more productive by making a productivity app? Not sure about that, but you can definitely become more productive by building new projects and a task management app has been on my mind for a long time now. I decided to build it in React without using any additional plugins except node-sass which allows you to use .scss files in your project.","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACJ0lEQVQozy2SbU+ScRSH+UZttrQCLQUUUwMh1xDNzEwcppIIAiJPIiqKSqLyIKI3EtyKCsOVvjA3N7e2vtPVn60X15uznev8zs5RNJ94eHbsoSnv4kne+Z95mk4WeF300ScH0Z36eXcZQWUb5ammF13gK321ZVSnizyXPLQUBFLD40bRIoSqopeByxiTV0nGrhLM1tMYpTDagg/TWRhLfRXDnovgxDgPqXXkVAz9kR9TMYQy5UaV8/CiEUygUBYW6ZB9OO4yyLdV5Mdf3Dze4yjt8jLvpl8OY6xGsGS9JB0z/M1u8SAlMaUDdGZFb8pDR0YgpK1HIqG67Ed7voS1tk20lmbvRiJ8dsCH4gqa4hL95QC6Hz6MeR+Sc5Zrt4M/uTj9OT/KfRdqMag960adEzSEXWd+9LUISxUv5fggye0RNjcsRKMWVqLDxJfN5NbM6ONzOO1TBLp17NutfJbidBx6aEu7RDo37UcLaBsrvzkPoJRDhHfGubO9oujo5tbZRX2ui4pDx66nj7LTwPBMGHXPKN/0b8lHQuyf3pC//8370iqth/OoxUG0kkjYcxGkXaw2KIpfEjamDueYztgx70zyccuKI7CI1eZlaH4DozXI1LSPUCzH2vE1m5k6oYsybScuNOIrNNICCkM1TE/Jz6ef6wyIa/ZWllGXgjQXvBhSCUzTCTrHwpjtMYYcm4y4v+Pfq7CSrTLhzxA8kOktR2k+dtIqpP8A4jaJ4Hdy4z4AAAAASUVORK5CYII=","aspectRatio":2.6666666666666665,"src":"/static/1312c0bcf30a703d64ed453a69a090d5/0e6e2/task.png","srcSet":"/static/1312c0bcf30a703d64ed453a69a090d5/b460a/task.png 480w,\n/static/1312c0bcf30a703d64ed453a69a090d5/6e898/task.png 960w,\n/static/1312c0bcf30a703d64ed453a69a090d5/0e6e2/task.png 1920w","srcWebp":"/static/1312c0bcf30a703d64ed453a69a090d5/30cf3/task.webp","srcSetWebp":"/static/1312c0bcf30a703d64ed453a69a090d5/35871/task.webp 480w,\n/static/1312c0bcf30a703d64ed453a69a090d5/fcc10/task.webp 960w,\n/static/1312c0bcf30a703d64ed453a69a090d5/30cf3/task.webp 1920w","sizes":"(max-width: 1920px) 100vw, 1920px"}}}}}},"pageContext":{"slug":"/Building-a-Task-Management-App-in-React/","previous":{"excerpt":"Pixel art games have been making a huge comeback in recent years, but this time not because we are limited by technology, but because pixel…","fields":{"slug":"/How-to-build-a-Pixel-Art-Drawing-App-in-React/"},"frontmatter":{"date":"December 05, 2020","title":"How to build a Pixel Art Drawing App in React","series":null,"description":"Pixel art games have been making a huge comeback in recent years, but this time not because we are limited by technology, but because pixel art is really great. Some game developers are adjusting their workflows to transform their end product into a pixel art game even though they might start with 3d modeling at first. Others go the usual way of drawing sprites in a Pixel Art Editor and that is exactly what we are going to build today. We will go over how to generate a dynamic pixel grid, how to set up a color picker, how to actually draw pixels and in the end how to export your finished pixel art into a png image.","tags":["web","react"],"featuredImage":{"id":"8c98e87e-4c0d-56d9-a288-41dc668e7a8f","publicURL":"/static/289cf244f4327c29c8bdd92f75c2f460/pixels.png","relativeDirectory":"How-to-build-a-Pixel-Art-Drawing-App-in-React","relativePath":"How-to-build-a-Pixel-Art-Drawing-App-in-React/pixels.png"}}},"next":{"excerpt":"Until a few days ago I had no idea voice control and speech recognition were such a big deal. I lost the link to it, but according to an…","fields":{"slug":"/Build-Voice-Navigation-with-React-and-Speech-Recognition/"},"frontmatter":{"date":"December 19, 2020","title":"Build Voice Navigation with React and Speech Recognition","series":null,"description":"Until a few days ago I had no idea voice control and speech recognition were such a big deal. I lost the link to it, but according to an article I read, a big percentage of population likes to talk into their phones and home assistants. Maybe I am getting old, since it looked like the age group that uses it the most is 16-24? I think that's great (using the tech, not me getting old). Not only does it promote even more accessibility on the web, but it also gives us a glimpse into a future where we are no longer slaves to our clumsy fingers. I personally make too many typing mistakes, both on PC and smartphone keyboards.","tags":["web","react"],"featuredImage":{"id":"85d90288-b834-5a78-89b5-92e68eb93caa","publicURL":"/static/a2244cabb7554fc37a4a2a8d6be10da4/voice.png","relativeDirectory":"Build-Voice-Navigation-with-React-and-Speech-Recognition","relativePath":"Build-Voice-Navigation-with-React-and-Speech-Recognition/voice.png"}}}}}}